<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li,
        ol {
            list-style: none;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .bannder {
            width: 1000px;
            height: 376px;
            position: relative;
            margin: 200px auto;
        }

        .abnnder>ul {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .bannder>ul>li {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: .5s;
        }

        .bannder>ul>li.active {
            opacity: 1;
        }

        .bannder>ol {
            width: 200px;
            height: 30px;
            position: absolute;
            right: 30px;
            bottom: 30px;
            background-color: rgba(0, 0, 0, .5);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 15px;
        }

        .bannder>ol>li {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 100%;
            cursor: pointer;
        }

        .bannder>ol>li.active {
            background-color: orange;
        }

        .bannder>div {
            width: 40px;
            height: 60px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, .5);

            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
            cursor: pointer;
        }

        .bannder>div.left {
            left: 0;
        }

        .bannder>div.right {
            right: 0;
        }
    </style>
</head>

<body>
    <!-- 轮播图区域 -->
    <div class="bannder">
        <!-- 图片区域 -->
        <ul class="imgbox">
            <li class="active"><img src="./1.png" alt=""></li>
            <li><img src="./2.png" alt=""></li>
            <li><img src="./3.png" alt=""></li>
            <li><img src="./4.png" alt=""></li>
            <li><img src="./5.png" alt=""></li>
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li data-i="0" data-name="point" class="active"></li>
            <li data-i="1" data-name="point"></li>
            <li data-i="2" data-name="point"></li>
            <li data-i="3" data-name="point"></li>
            <li data-i="4" data-name="point"></li>
        </ol>
        <!-- 左按钮，右按钮 -->
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>


    <script>
        // 打开页面 自动轮播 
        // 鼠标移入图片区域 停止轮播 
        // 鼠标点击按钮 指定的图片显示 该按钮高亮 
        // 同一时刻只能有一个图片显示  一个按钮高亮 
        // 按钮向左 图片向左切换  按钮向右 图片向右切换
        // 防止越界    向左重点是第一张  向右的终点  第二张 


        // 自动轮播  每隔多少秒 显示一个 
        // 向左      显示上一张 
        // 向右      显示下一张 

        // 他们有一个共同的动作 显示指定的图片 

        // 可以封装成一个函数 需要传一个参数  显示指定的图片 


        // 获取所有的图片
        var imgs = document.querySelectorAll('ul>li');
        var btns = document.querySelectorAll('ol>li');
        var box = document.getElementsByClassName('bannder')[0];
        // alert(imgs.length);
        // 准备一个变量  表示当前第几张 默认为0 
        var index = 0;  // 默认显示第一张 
        var times;
        // 约定 type为 true 的时候 表示 你想上一张 
        // 约定 type为 false 的时候 表示 你想下一张 
        // 约定 type为 数字 的时候 表示 你想显示指定的图片
        function display_img(type) {
            // 为了同一时刻 只有一个图片显示  一个按钮高亮
            // 让当前 图片隐藏 当前按钮取消高亮 
            // index 在变化 

            // 让变化后的图片显示  按钮高亮 
            imgs[index].className='';
            btns[index].className='';


            if (type === true) {  // 三个等号 防止 数字默认转成true或者false
                // 想上一张
                index--;
            }
            else if (type === false) {
                // 想下一张 
                index++
            }

            else {
                // 指定的图片
                index = type; // 如果type是数字 index 表示第几页 
                // 需要把type 赋值给index
            }

            // 防止越界 
            if (index < 0) { // 第一张继续向左 最后一张
                index = imgs.length - 1;
            }

            if (index >= imgs.length) { // 最后一张向右 第一张 
                index = 0;
            }

            imgs[index].className='active';
            btns[index].className='active';

        }


        // display_img(false); 下一张 
        // display_img(true); 上一张
        // display_img(3); 指定页面

        // 自动轮播  
        // 定时器 每个 2000 切换到下一张 
        // 间歇定时器 

        function run() {
            times = setInterval(function () {
                display_img(false);
            }, 2000);
        }


        run();


        // 鼠标移入 停止轮播 
        box.onmouseover = function () {
            clearInterval(times)
        }
        // 鼠标移出 开始轮播
        box.onmouseout = function () {
            run();

        }


        // 事件委托  
        // 点击左右按钮  底部点按钮 

        // 把左右按钮  底部点按钮  委托给父元素 

        box.onclick = function(e){
            // 获取事件对象 
            e = e  || window.event ;
            // 判断用户到底点的是啥 
            // console.log(e.target);
            if(e.target.className == 'left'){
                // alert('你点的是上一页')
                display_img(true);
            }

            if(e.target.className == 'right'){
                // alert('你点的是下一页')
                display_img(false);
            }

            if(e.target.dataset.name == 'point'){
                // alert('你点的是小点');
                ;
                display_img(e.target.dataset.i - 0);
            }



        }




    </script>
</body>

</html>